<template>
  <div class="Database">
    <div class="Database_top">
      <div class="top_wrapper">
        <div class="left_wrapper">
          <div class="Database_icon">
            <img :src="src" />
          </div>
          <div class="Disk_usage">
            <span class="usage">磁盘使用: {{ DiskData }}</span>
          </div>
        </div>
        <div class="pieChart_wrapper">
          <pieChartData :legend="pieLegend" :value="pieValue" />
        </div>
      </div>
    </div>
    <div class="Database_bottom">
      <div class="bottom_wrapper">
        <lineChartData
          :legend="lineLegend"
          :xAxis="lineXAxis"
          :value="lineValue"
        />
      </div>
    </div>
  </div>
</template>

<script>
import lineChartData from "@/components/DatabaseStatistics/lineChartStatistics.vue";
import pieChartData from "@/components/DatabaseStatistics/pieChartStatistics.vue";

export default {
  name: "Database",
  props: {
    id: {
      default: () => 1,
    },
    src: {
      default: () => require("../../assets/img/DatabaseIcon/Database_1.png"),
    },
    DiskData: {
      default: () => 642,
    },
    lineLegend: {
      type: Array,
      default: () => ["db.memorry.total", "db.memorry.used", "db.memorry.free"],
    },
    lineXAxis: {
      type: Array,
      default: () => [
        "10:44:40",
        "10:46:50",
        "10:49:50",
        "10:51:10",
        "10:51:50",
        "10:53:20",
        "10:55:30",
        "10:57:40",
        "10:59:50",
        "11:02:00",
      ],
    },
    lineValue: {
      type: Array,
      default: () => [
        [10, 16, 13, 19, 5, 22, 11, 23, 14, 21],
        [4, 22, 5, 13, 14, 27, 14, 16, 10, 26],
        [8, 14, 9, 20, 10, 20, 27, 24, 25, 20],
      ],
    },
    pieValue: {
      type: Array,
      default: () => [
        { value: 150, name: "已使用" },
        { value: 300, name: "未使用" },
      ],
    },
    pieLegend: {
      type: Array,
      default: () => [{ name: "已使用" }, { name: "未使用" }],
    },
  },
  components: {
    lineChartData,
    pieChartData,
  },
  data() {
    return {};
  },
  created() {
    this.setSrc();
  },
  methods: {
    setSrc() {
      console.log(this.id);
      this.src = require(`../../assets/img/DatabaseIcon/Database_${this.id}.png`);
    },
  },
};
</script>

<style lang="scss" scoped>
.Database {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .Database_top {
    .top_wrapper {
      height: 159px;
      display: flex;
      .left_wrapper {
        width: 35%;
        .Database_icon {
          width: 112px;
          height: 64px;
          margin-top: 7px;
          margin-left: 6px;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .Disk_usage {
          .usage {
            width: 133px;
            height: 28px;
            font-size: 20px;
            font-family: Source Han Sans CN !important;
            font-weight: 400;
            line-height: 28px;
            color: #000000;
          }
          // margin-top: 40px;
          margin-left: 15px;
        }
      }
      .pieChart_wrapper {
        width: 65%;
      }
    }
  }
  .Database_bottom {
    .bottom_wrapper {
      min-width: 543px;
      height: 241px;
      margin: 0px 7px 20px 10px;
    }
  }
}
</style>